<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>公共组件demo</title>
    <link rel="stylesheet" href="../components/AdminLTE/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../components/AdminLTE/plugins/datepicker/datepicker3.css">
    <style>
        .datepicker-days { display: none;}
        .box{width:50%; padding:20px; margin:20px auto; background-color:#f0f3f9; text-align:justify;}
        .list{width:120px; display:inline-block; padding-bottom:20px; text-align:center; vertical-align:top;}
        img { width: 100%;}
    </style>
</head>
<body>

<div style="width: 500px;margin: 100px auto;">
    <div>月份选择</div>
    <div id="datepicker1" class="input-daterange input-group">
        <input type="text" class="input-sm form-control" name="start" />
        <span class="input-group-addon">至</span>
        <input type="text" class="input-sm form-control" name="end" />
    </div>


    <div>多选</div>

    <div id="datepicker2" class="input-daterange input-group">
        <input type="text" class="input-sm form-control" name="start" />
    </div>

</div>


<div class="box">
    <div class="list">
        <img src="http://image.zhangxinxu.com/image/study/s/s128/mm9.jpg" />
        哇哦，美女，口水，鼻血~~~
    </div>
    <div class="list">
        <img src="http://image.zhangxinxu.com/image/study/s/s128/mm9.jpg" />
        哇哦，美女，口水，鼻血~~~
    </div>
    <div class="list">
        <img src="http://image.zhangxinxu.com/image/study/s/s128/mm9.jpg" />
        哇哦，美女，口水，鼻血~~~
    </div>
    <div class="list">
        <img src="http://image.zhangxinxu.com/image/study/s/s128/mm9.jpg" />
        哇哦，美女，口水，鼻血~~~
    </div>
    <div class="list">
        <img src="http://image.zhangxinxu.com/image/study/s/s128/mm9.jpg" />
        哇哦，美女，口水，鼻血~~~
    </div>
    <div class="list">
        <img src="http://image.zhangxinxu.com/image/study/s/s128/mm9.jpg" />
        哇哦，美女，口水，鼻血~~~
    </div>
    <div class="list">
        <img src="http://image.zhangxinxu.com/image/study/s/s128/mm9.jpg" />
        哇哦，美女，口水，鼻血~~~
    </div>
    <div class="list">
        <img src="http://image.zhangxinxu.com/image/study/s/s128/mm9.jpg" />
        哇哦，美女，口水，鼻血~~~
    </div>
    <div class="list">
        <img src="http://image.zhangxinxu.com/image/study/s/s128/mm9.jpg" />
        哇哦，美女，口水，鼻血~~~
    </div>
    <div class="list">
        <img src="http://image.zhangxinxu.com/image/study/s/s128/mm9.jpg" />
        哇哦，美女，口水，鼻血~~~
    </div>
    <div class="list">
        <img src="http://image.zhangxinxu.com/image/study/s/s128/mm9.jpg" />
        哇哦，美女，口水，鼻血~~~
    </div>

</div>

<script src="../js/jquery-1.11.3.min.js"></script>
<script src="../components/AdminLTE/plugins/datepicker/bootstrap-datepicker.js"></script>
<script src="../components/AdminLTE/plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<script>

    $('#datepicker1').datepicker( {
        language: "zh-CN",
        format: 'yyyy/mm',
        minViewMode:1
    });

    $('#datepicker2').find('input').datepicker( {
        format: "yyyy/mm",
        minViewMode: 1,
        language: "zh-CN",
        keyboardNavigation: false,
        forceParse: false
    });



</script>
</body>
</html>